<template>
    <a-card :bordered="false">
        <a-button @click="showGantt=true" type="primary" icon="search"
            style="position: absolute;top: 5%;right: 10%;z-index: 1000;">查看排班记录</a-button>
        <a-row>
            <a-col :span="16">
                <a-form-item label="员工">
                    <a-button @click="selectUser=true" type="primary" icon="plus">选择员工</a-button>
                    <div>
                        <span v-for="item in checkList" :key="item.key">
                            {{ item.data.props.title }}</span>
                    </div>
                </a-form-item>
            </a-col>
            <a-col :span="24">
                <a-form-item label="班次">
                    <j-dict-select-tag dictCode="classes, name, id"
                        v-model="scheduling.selectClasses" placeholder="请选择班次"
                        style="width: 200px;"></j-dict-select-tag>
                </a-form-item>
            </a-col>
            <a-col :span="24" style="text-align: center">
                <a-button @click="submitForm" type="primary">保存排班规则</a-button>
                <a-button @click="perpetuate" type="primary"
                    style="float: right; right: 15%;">延续一周排班</a-button>
            </a-col>
        </a-row>
        <Calendar @date-selecteds="handleDateSelected" ref="childRef"></Calendar>
        <a-modal title="选择员工" :visible="selectUser" :confirm-loading="confirmLoading" @ok="handleOk"
            @cancel="handleCancel">
            <a-tree v-model="scheduling.checkedKeys" checkable :expanded-keys="expandedKeys"
                :auto-expand-parent="autoExpandParent" :selected-keys="selectedKeys"
                :tree-data="treeData" @expand="onExpand" @select="onSelect" @check="onCheck"
                :replaceFields="{children:'children', title:'title', key:'key' }" />
        </a-modal>
        <j-modal title="排班记录" width="30%" :visible="showGantt" @ok="handleOk" @cancel="handleCancel"
            cancelText="关闭" :fullscreen="true">
            <scheduling-record></scheduling-record>
        </j-modal>
    </a-card>
</template>

<script>
import { getAction, postAction } from '../../../api/manage';
import JDictSelectTag from '../../../components/dict/JDictSelectTag.vue';
import Calendar from './Calendar.vue'
import SchedulingRecord from './SchedulingRecord.vue';

export default {
    name: 'SchedulingList',
    components: {
        Calendar,
        JDictSelectTag,
        SchedulingRecord,
    },
    data() {
        return {
            checkList: [],
            description: '排班表管理页面',
            selectUser: false,
            confirmLoading: false,
            expandedKeys: [],
            autoExpandParent: true,
            selectedKeys: [],
            treeData: [],//部门-用户树结构列表
            url: {
                treeList: "/employee/employee/treeList",
                getClasses: "/classes/classes/getAll",
                addScheduling: '/scheduling/scheduling/adds',
                perpetuate: "/scheduling/scheduling/perpetuate",//延续排班
            },
            classes: [],//班次
            scheduling: {
                checkedKeys: [],//选中员工
                selectClasses: undefined,//选中班次
                dates: [],//选中日期
            },
            showGantt: false,
        }
    },
    created() {
        this.getTreeList()
        this.getClasses()
    },
    computed: {

    },
    methods: {
        perpetuate() {//延续生成排班
            if (this.scheduling.checkedKeys.length < 1) {
                this.$message.error('请选择员工')
                return
            }
            postAction(this.url.perpetuate, this.scheduling).then((res) => {
                if (res.success) {
                    this.$message.success(res.message)
                    this.scheduling = {
                        checkedKeys: [],//选中员工
                        selectClasses: undefined,//选中班次
                        dates: [],//选中日期
                    }
                    this.checkList = []
                    this.$refs.childRef.handleClear()
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        submitForm() {
            if (this.scheduling.checkedKeys.length < 1) {
                this.$message.error('请选择员工')
                return
            }
            if (!this.scheduling.selectClasses) {
                this.$message.error('请选择班次')
                return
            }
            if (this.scheduling.dates.length < 1) {
                this.$message.error('请选择日期')
                return
            }
            postAction(this.url.addScheduling, this.scheduling).then((res) => {
                if (res.success) {
                    this.$message.success(res.message)
                    this.scheduling = {
                        checkedKeys: [],//选中员工
                        selectClasses: undefined,//选中班次
                        dates: [],//选中日期
                    }
                    this.checkList = []
                    this.$refs.childRef.handleClear()
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        getTreeList() {
            getAction(this.url.treeList).then((res) => {
                if (res.success) {
                    this.treeData = res.result
                    // this.treeData = this.handleTreeData(res.result)
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        getClasses() {
            getAction(this.url.getClasses).then((res) => {
                if (res.success) {
                    this.classes = res.result
                } else {
                    this.$message.warning(res.message)
                }
            })
        },
        handleTreeData(data, targetKeys = []) {
            data.forEach((item) => {
                item["disabled"] = targetKeys.includes(item.key);
                //如果有children，就代表是父节点
                if (item.children) {
                    this.handleTreeData(item.children, targetKeys);
                    //   item.disabled = true;
                    item.selectable = false; //是否可选
                    item.checkable = false; //设置独立节点是否展示 Checkbox
                }
            });
            return data;
        },
        classChange(e) {
            console.log(e)
        },
        onExpand(expandedKeys) {
            this.expandedKeys = expandedKeys;
            this.autoExpandParent = false;
        },
        onCheck(checkedKeys, e) {
            this.checkList = e.checkedNodes
            this.scheduling.checkedKeys = checkedKeys;
            e.checkedNodes.forEach((item) => {
                //如果有children，就代表是父节点
                let dataRef = item.data.props.dataRef
                if (dataRef.children && dataRef.children.length) {
                    this.scheduling.checkedKeys = this.scheduling.checkedKeys.filter(item => item !== dataRef.key)
                    this.checkList = this.checkList.filter(e => e !== item)
                }
            });
        },
        onSelect(selectedKeys, e) {
            this.selectedKeys = selectedKeys;
        },
        handleDateSelected(selectedDates) {
            console.log(selectedDates)
            this.scheduling.dates = selectedDates
        },
        handleOk() {
            this.selectUser = false
            this.showGantt = false
        },
        handleCancel() {
            this.selectUser = false
            this.showGantt = false
        },
    }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>